<template>
	<a-card title="修改密码">
		<div class="container">
			<a-form ref="formRef" :model="form" :rules="formRules" layout="vertical">
				<a-row :gutter="24">
					<a-col :span="10">
						<!-- 旧密码 -->
						<a-form-item label="旧密码" name="oldPassword">
							<a-input-password v-model:value="form.oldPassword" placeholder="请输入旧密码" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="10">
						<!-- 新密码 -->
						<a-form-item label="新密码" name="newPassword">
							<a-input-password v-model:value="form.newPassword" placeholder="请输入新密码" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="10">
						<!-- 确认密码 -->
						<a-form-item label="确认密码" name="confirmPassword">
							<a-input-password v-model:value="form.confirmPassword" placeholder="确认新密码" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="10">
						<a-form-item>
							<a-button
								type="primary"
								html-type="submit"
								:loading="loading"
								:style="{ width: '100%' }"
								@click="handleSubmit"
							>
								确定
							</a-button>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</div>
	</a-card>
</template>

<script>
	import { message, Modal } from 'ant-design-vue';
	import landlordApi from "@/api/landlordApi";

	export default {
		data() {
			return {
				form: {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				},
				loading: false,
				formRules: {
					oldPassword: [
						{ required: true, message: '请输入旧密码', trigger: 'blur' },
						{
							validator: (rule, value, callback) => {
								if (value.length < 6 && value) {
									callback('密码至少为6位');
								} else {
									callback(); // 校验通过
								}
							},
							trigger: 'blur'
						}
					],
					newPassword: [
						{ required: true, message: '请输入新密码', trigger: 'blur' },
						{
							validator: (rule, value, callback) => {
								if (value.length < 6 && value) {
									callback('密码至少为6位');
								} else {
									callback(); // 校验通过
								}
							},
							trigger: 'blur'
						}
					],
					confirmPassword: [
						{ required: true, message: '请输入确认密码', trigger: 'blur' },
						{
							validator: (rule, value, callback) => {
								if (value.length < 6 && value) {
									callback('密码至少为6位');
								} else if (value !== this.newPassword && value) {
									if (!this.newPassword) {
										callback();
									}
									callback('新密码与确认密码不一致');
								} else {
									callback(); // 校验通过
								}
							},
							trigger: 'blur'
						}
					]
				}
			};
		},
		methods: {
			// 提交表单数据
			handleSubmit() {
				this.$refs.formRef
					.validate()
					.then(() => {
						Modal.confirm({
							title: '确认修改',
							content: '您确定要修改密码吗？',
							okText: '确认',
							cancelText: '取消',
							onOk: () => {
								landlordApi
									.modifyPass(this.form)
									.then((res) => {
										this.loading = false;
										message.success('密码修改成功', 1);
										setTimeout(() => {
											localStorage.removeItem('satoken');
											localStorage.removeItem('name');
											//刷新页面
											window.location.reload();
										}, 1000);
									})
									.catch((err) => {
										this.loading = false;
										console.error('密码修改失败');
									});
							},
							onCancel: () => {}
						});
					})
					.catch((error) => {
						console.error('表单验证失败:', error);
					});
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
</style>
